<template>
	<view class="content">
		<!-- 登录前的登录框 -->
		<view v-if="!login" class="login-box">
			<h4>登录</h4>
			<u-field v-model="sfz" type="text" label="身份证" placeholder="请填写身份证号码">
			</u-field>
			<u-field v-model="pwd" type="password" label="密码" placeholder="请填写密码">
			</u-field>
			<u-button type="primary" size="mini" @click="handleLogin">登录</u-button>
		</view>
		<!-- 登录后的界面 -->
		<view v-else class="login-success">
			<view class="login-success-header">
				<view class="user-name-cirle">
					<u-avatar bg-color="#F5CB5A" mode="circle" :text="userName"></u-avatar>
				</view>
				<view class="user-name-sfz">
					<view>{{userName}}</view>
					<view>{{userSfz}}</view>
				</view>
			</view>
			<u-gap height="20" bg-color="#eee"></u-gap>
			<view class="all-funcs">
				<view class="every-funcs" @click="handleGoDetail('/pages/detail/myAllQrCodes')">
					<text class="iconfont icon-qrcode" style="color: #0982D9;">三码合一</text>
					<u-icon name="arrow-right-double"></u-icon>
				</view>
				<view class="every-funcs" @click="handleGoDetail('/pages/detail/myHsjcResult')">
					<text class="iconfont icon-hesuanjiance" style="color: #0982D9;">核酸检测结果</text>
					<u-icon name="arrow-right-double"></u-icon>
				</view>
				<view class="every-funcs" @click="handleGoDetail('/pages/detail/myYmjzRecords')">
					<text class="iconfont icon-yimiao" style="color: #0982D9;">疫苗接种记录</text>
					<u-icon name="arrow-right-double"></u-icon>
				</view>
				<view class="every-funcs" @click="handleGoDetail('lxkf')">
					<text class="iconfont icon-kefu" style="color: #0982D9;">联系客服</text>
					<u-icon name="arrow-right-double"></u-icon>
				</view>
				<view class="every-funcs" @click="handleGoDetail('tcdl')">
					<text class="iconfont icon-tuichu" style="color: #0982D9;">退出登录</text>
					<u-icon name="arrow-right-double"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let me;
	import funcs from "@/static/js/func.js";
	export default {
		data() {
			return {
				login: !!uni.getStorageSync("token"),
				// 未登录
				sfz: "",
				pwd: "",
				// 已登录
				userName: uni.getStorageSync("userName") || "",
				userSfz: uni.getStorageSync("userSfz") || "",
			};
		},
		onLoad() {
			me = this;
		},
		methods: {
			/**
			 * 登录
			 */
			handleLogin() {
				if (!me.sfz) {
					funcs.showModalTips("请填写身份证号码");
					return;
				} else if (!me.pwd) {
					funcs.showModalTips("请填写密码");
					return;
				}
				let param = {
					account: me.sfz,
					password: me.pwd
				}
				uni.showLoading({
					title: "加载中"
				})
				me.$api.requestTask("/userLogin", param, res => {
					uni.hideLoading()
					if (res.code == "200") {
						me.login = true;
						me.userName = res.data.name;
						me.userSfz = me.sfz;
						uni.setStorageSync("userName", res.data.name);
						uni.setStorageSync("userSfz", me.sfz);
						uni.setStorageSync("token", res.data.token);
					} else {
						funcs.showModalTips(res.msg || "登录失败，请重试");
					}
				}, err => {
					uni.hideLoading()
					funcs.showModalTips("对不起，系统错误，请稍后再试");
				})
			},
			/**
			 * 跳往二级页面
			 */
			handleGoDetail(flag) { // smhy hsjcjg jmjzjl lxkf 
				if (flag == "lxkf") {
					uni.makePhoneCall({
						phoneNumber: "10086"
					})
				} else if(flag == "tcdl") {
					uni.clearStorageSync()
					me.login = "";
					me.userName = "";
					me.userSfz = "";
				} else {
					uni.navigateTo({
						url: flag
					})
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		.login-box {
			position: fixed;
			width: 70vw;
			left: 15vw;
			top: 30vw;
			text-align: center;
			border: 1px solid #ccc;
			padding: 16rpx 0;
			border-radius: 16rpx;
		}

		.login-success {
			.login-success-header {
				padding: 16rpx;
				display: flex;

				.user-name-cirle {}

				.user-name-sfz {
					padding-left: 24rpx;
					line-height: 1.4em;
				}
			}
			.all-funcs {
				.every-funcs  {
					display: flex;
					justify-content: space-between;
					padding: 0 24rpx;
					height: 3em;
					line-height: 3em;
					border-bottom: 1px solid #ccc;
					/deep/.iconfont {
						span {
							padding-left: 12rpx;	
							color: #000;
						}
					}
				}
			}
		}
	}
</style>
